<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
    </style>
</head>
<body>
    <div id="root"></div>
    <script src="../../js/react.js" charset="utf-8"></script>
    <script src="../../js/react-dom.js" charset="utf-8"></script>
    <script src="../../js/browser.min.js" charset="utf-8"></script>
    <script type="text/babel">

    class ProductCategoryRow extends React.Component {
      render() {
        return (<tr><th colSpan="2">{this.props.category}</th></tr>);
      }
    }

    class ProductRow extends React.Component {
      render() {
        var name = this.props.product.stocked ?
          this.props.product.name :
          <span style={{color: 'red'}}>
            {this.props.product.name}
          </span>;
        return (
          <tr>
            <td>{name}</td>
            <td>{this.props.product.price}</td>
          </tr>
        );
      }
    }

    class ProductTable extends React.Component {
      render() {
        var rows = [];
        var lastCategory = null;
        this.props.products.forEach((product) => {
          if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
            return;
          }
          if (product.category !== lastCategory) {
            rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
          }
          rows.push(<ProductRow product={product} key={product.name} />);
          lastCategory = product.category;
        });
        return (
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Price</th>
              </tr>
            </thead>
            <tbody>{rows}</tbody>
          </table>
        );
      }
    }

    class SearchBar extends React.Component {
      constructor(props) {
        super(props);
        this.handleChangeText = this.handleChangeText.bind(this);
        this.handleChangeCheckbox = this.handleChangeCheckbox.bind(this);
        this.state = {
            value: '',
            checked: false
        }
      }


      handleChangeText(e) {
          this.setState({
              value: e.target.value
          })

          this.props.onUserInput(
            e.target.value,
            this.state.checked
          );
      }

      handleChangeCheckbox(e) {
          this.setState({
              checked: e.target.checked
          })

          this.props.onUserInput(
            this.state.value,
            e.target.checked
          );
      }

      render() {
        return (
          <form>
            <input
              type="text"
              placeholder="Search..."
              value={this.state.value}
              onChange={this.handleChangeText}
            />
            <p>
              <input
                type="checkbox"
                checked={this.state.checked}
                onChange={this.handleChangeCheckbox}
              />
              {' '}
              Only show products in stock
            </p>
          </form>
        );
      }
    }

    class FilterableProductTable extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          filterText: '',
          inStockOnly: false
        };

        this.handleUserInput = this.handleUserInput.bind(this);
      }

      handleUserInput(filterText, inStockOnly) {
        this.setState({
          filterText: filterText,
          inStockOnly: inStockOnly
        });
      }

      render() {
        return (
          <div>
            <SearchBar
              onUserInput={this.handleUserInput}
            />
            <ProductTable
              products={this.props.products}
              filterText={this.state.filterText}
              inStockOnly={this.state.inStockOnly}
            />
          </div>
        );
      }
    }


    var PRODUCTS = [
      {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
      {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
      {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
      {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
      {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
      {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
    ];

    ReactDOM.render(
      <FilterableProductTable products={PRODUCTS} />,
      document.getElementById('root')
    );

    </script>
</body>
</html>
